<template>
    <div class="pagination">
        <button @click="changePageNo(pageNo - 1)" :disabled="pageNo === 1">上一页</button>
        <button @click="changePageNo(pageNo - 1)" v-show="startEnd.start !== 1">1</button>
        <span v-show="startEnd.start > 2">···</span>
        <!-- 连续分页 -->
        <button @click="changePageNo(index + startEnd.start)" :class="{ active: pageNo === index + startEnd.start }"
            v-for="(n, index) in (startEnd.end - startEnd.start + 1)" :key="index">
            {{ index + startEnd.start }}
        </button>

        <span v-show="startEnd.end < totalPage - 1">···</span>
        <button @click="changePageNo(totalPage)" v-show="startEnd.end !== totalPage">{{ totalPage }}</button>
        <button @click="changePageNo(pageNo + 1)" :disabled="pageNo === totalPage">下一页</button>

        <span>共{{ total }} 条</span>
    </div>
</template>
  
<script>
export default {
    name: "Pagination",
    props: {
        total: {  //总数
            required: true,
        },
        pageSize: {  //每页展示数量
            type: Number,
            required: true,
        },
        pageNo: { //当前页码
            type: Number,
            required: true,
        },
        continues: {  //连续页数
            type: Number,
            default: 5
        },
        changePageNo: {
            type: Function,
            required: true
        }
    },
    computed: {
        // 总页码
        totalPage() {
            return Math.ceil(this.total / this.pageSize);
        },
        //计算连续分页初始值和结束值
        startEnd() {

            let { pageNo, pageSize, continues, totalPage } = this;
            // 初识值
            let start = 0;
            //结束值
            let end = 0;
            if (continues > totalPage) {
                start = 1;
                end = totalPage;
            } else {
                //计算
                start = pageNo - (continues - 1) / 2;
                end = pageNo + (continues - 1) / 2;
                //计算 不正常情况 
                if (start < 1) {
                    start = 1;
                    end = continues;
                }
                // 不正常情况2
                if (end > totalPage) {
                    start = totalPage - continues + 1;
                    end = totalPage;
                }
            }
            return {
                start,
                end
            }
        }
    }
};
</script>
  
<style lang="less" scoped>
.pagination {
    text-align: center;

    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: gray;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #c81623;
            color: #fff;
        }
    }

    span {
        display: inline-block;
        line-height: 28px;
        font-size: 14px;
        color: gray;
        vertical-align: middle;
    }
}
</style>